/**
 * 赛博侦探游戏 - 主菜单场景
 * 实现赛博朋克风格的主界面
 */

import Phaser from 'phaser';
import { useGameState } from '../GameState';

export class MainMenuScene extends Phaser.Scene {
  private startButton!: Phaser.GameObjects.Container;
  private titleText!: Phaser.GameObjects.Text;
  private particles!: Phaser.GameObjects.Particles.ParticleEmitter;
  
  constructor() {
    super({ key: 'MainMenu' });
  }

  /**
   * 预加载游戏资源
   */
  preload() {
    // 创建简单的像素纹理用于粒子效果
    this.load.image('particle', '');
    
    // 加载音效（暂时使用占位符）
    // this.load.audio('ambient', 'assets/audio/cyber-ambient.mp3');
    // this.load.audio('click', 'assets/audio/click.mp3');
  }

  /**
   * 创建主菜单界面
   */
  create() {
    const { width, height } = this.scale;
    
    // 创建赛博朋克风格背景
    this.createCyberBackground();
    
    // 创建粒子效果
    this.createParticleEffects();
    
    // 创建标题
    this.createTitle();
    
    // 创建主菜单按钮
    this.createMainMenu();
    
    // 添加键盘事件
    this.input.keyboard?.on('keydown-SPACE', () => {
      this.startGame();
    });
  }

  /**
   * 创建赛博朋克背景效果
   */
  private createCyberBackground() {
    const { width, height } = this.scale;
    
    // 渐变背景
    const bg = this.add.graphics();
    bg.fillGradientStyle(0x0a0a0a, 0x1a1a2e, 0x16213e, 0x0f3460);
    bg.fillRect(0, 0, width, height);
    
    // 网格效果
    this.createGridEffect();
    
    // 霓虹光效边框
    this.createNeonBorder();
  }

  /**
   * 创建网格效果
   */
  private createGridEffect() {
    const { width, height } = this.scale;
    const gridSize = 50;
    
    const grid = this.add.graphics();
    grid.lineStyle(1, 0x00FFFF, 0.1);
    
    // 垂直线
    for (let x = 0; x <= width; x += gridSize) {
      grid.moveTo(x, 0);
      grid.lineTo(x, height);
    }
    
    // 水平线
    for (let y = 0; y <= height; y += gridSize) {
      grid.moveTo(0, y);
      grid.lineTo(width, y);
    }
    
    grid.strokePath();
  }

  /**
   * 创建霓虹边框
   */
  private createNeonBorder() {
    const { width, height } = this.scale;
    
    const border = this.add.graphics();
    border.lineStyle(3, 0x00FFFF, 0.8);
    border.strokeRect(10, 10, width - 20, height - 20);
    
    // 添加发光效果
    border.setPostPipeline('glow');
  }

  /**
   * 创建粒子效果
   */
  private createParticleEffects() {
    const { width, height } = this.scale;
    
    // 创建粒子发射器
    this.particles = this.add.particles(0, 0, 'particle', {
      x: { min: 0, max: width },
      y: { min: -10, max: -5 },
      speedY: { min: 20, max: 50 },
      scale: { min: 0.1, max: 0.3 },
      alpha: { start: 0.8, end: 0 },
      lifespan: 3000,
      tint: [0x00FFFF, 0xFF00FF, 0x39FF14],
      frequency: 100
    });
  }

  /**
   * 创建游戏标题
   */
  private createTitle() {
    const { width } = this.scale;
    
    this.titleText = this.add.text(width / 2, 150, '赛博侦探', {
      fontSize: '64px',
      color: '#00FFFF',
      fontFamily: 'Arial, sans-serif',
      stroke: '#FF00FF',
      strokeThickness: 2
    }).setOrigin(0.5);
    
    // 添加发光效果动画
    this.tweens.add({
      targets: this.titleText,
      alpha: { from: 0.7, to: 1 },
      duration: 1500,
      yoyo: true,
      repeat: -1,
      ease: 'Sine.easeInOut'
    });
    
    // 副标题
    this.add.text(width / 2, 220, '三分钟案件', {
      fontSize: '24px',
      color: '#FFFFFF',
      fontFamily: 'Arial, sans-serif'
    }).setOrigin(0.5);
  }

  /**
   * 创建主菜单
   */
  private createMainMenu() {
    const { width, height } = this.scale;
    
    // 开始游戏按钮
    this.startButton = this.createMenuButton(width / 2, height / 2, '开始新案件', () => {
      this.startGame();
    });
    
    // 排行榜按钮
    this.createMenuButton(width / 2, height / 2 + 80, '排行榜', () => {
      console.log('打开排行榜');
    });
    
    // 设置按钮
    this.createMenuButton(width / 2, height / 2 + 160, '游戏设置', () => {
      console.log('打开设置');
    });
  }

  /**
   * 创建菜单按钮
   */
  private createMenuButton(x: number, y: number, text: string, callback: () => void): Phaser.GameObjects.Container {
    const container = this.add.container(x, y);
    
    // 按钮背景
    const bg = this.add.graphics();
    bg.fillStyle(0x1a1a2e, 0.8);
    bg.strokeStyle(0x00FFFF, 2);
    bg.fillRoundedRect(-120, -25, 240, 50, 10);
    bg.strokeRoundedRect(-120, -25, 240, 50, 10);
    
    // 按钮文字
    const buttonText = this.add.text(0, 0, text, {
      fontSize: '20px',
      color: '#FFFFFF',
      fontFamily: 'Arial, sans-serif'
    }).setOrigin(0.5);
    
    container.add([bg, buttonText]);
    
    // 交互事件
    container.setSize(240, 50);
    container.setInteractive()
      .on('pointerover', () => {
        bg.clear();
        bg.fillStyle(0x00FFFF, 0.2);
        bg.strokeStyle(0xFF00FF, 3);
        bg.fillRoundedRect(-120, -25, 240, 50, 10);
        bg.strokeRoundedRect(-120, -25, 240, 50, 10);
        buttonText.setColor('#00FFFF');
        
        // 播放悬停音效
        // this.sound.play('hover', { volume: 0.3 });
      })
      .on('pointerout', () => {
        bg.clear();
        bg.fillStyle(0x1a1a2e, 0.8);
        bg.strokeStyle(0x00FFFF, 2);
        bg.fillRoundedRect(-120, -25, 240, 50, 10);
        bg.strokeRoundedRect(-120, -25, 240, 50, 10);
        buttonText.setColor('#FFFFFF');
      })
      .on('pointerdown', () => {
        // 播放点击音效
        // this.sound.play('click', { volume: 0.5 });
        
        // 按钮点击动画
        this.tweens.add({
          targets: container,
          scaleX: 0.95,
          scaleY: 0.95,
          duration: 100,
          yoyo: true,
          onComplete: callback
        });
      });
    
    return container;
  }

  /**
   * 开始游戏
   */
  private async startGame() {
    // 淡出效果
    this.cameras.main.fadeOut(500, 0, 0, 0);
    
    this.cameras.main.once('camerafadeoutcomplete', async () => {
      // 初始化游戏状态
      await useGameState.getState().startNewCase();
      
      // 切换到调查场景
      this.scene.start('Investigation');
    });
  }

  /**
   * 场景更新
   */
  update() {
    // 可以在这里添加动画更新逻辑
  }
}